<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Farm" />
<title>Farm</title>
<script type="text/javascript">
    log = new Object();
    log.info = console.info;
    log.error = console.error;
    log.debug = console.debug;
    log.warn = console.warn;
    log.assert = console.assert;
    log.trace = console.trace;
    log.time = console.time;
</script>
<script type="text/javascript" src="script/Utils.js"></script>
<script type="text/javascript" src="script/Defines.js"></script>
<script type="text/javascript" src="script/UIManager.js"></script>
<script type="text/javascript" src="script/StaticModels.js"></script>
<script type="text/javascript" src="script/ActionManager.js"></script>
<script type="text/javascript" src="script/Track.js"></script>
<script type="text/javascript" src="script/Models.js"></script>
<script type="text/javascript" src="script/ImageManager.js"></script>
<script type="text/javascript" src="script/AnimationManager.js"></script>
<script type="text/javascript" src="script/DisplayObject.js"></script>
<script type="text/javascript" src="script/Scene.js"></script>
<script type="text/javascript" src="script/UIComponent.js"></script>
<script type="text/javascript" src="script/Views.js"></script>
<script type="text/javascript" src="script/Renderer.js"></script>
<script type="text/javascript" src="script/FarmState.js"></script>
<script type="text/javascript" src="script/FarmApplication.js"></script>
<script type="text/javascript">
// init here

var app = null;
StaticModels.createFakeData();
var g_imgMgr = new UrlImageManager();
var g_aniMgr = new AnimationManager();

function getApp()
{
	return app;
}

onload = function()
{
    // TODO. need redesign the codes. move to somewhere.
    var globalDiv = document.getElementById('global_container');
	var canvas = document.getElementById('gameBody');
    var uibody = document.getElementById('uiBody');
	canvas.width = CANVAS_WIDTH;
	canvas.height = CANVAS_HEIGHT;
	g_canvasOffsetX = globalDiv.offsetLeft;
	g_canvasOffsetY = globalDiv.offsetTop;
   
    Models.createModels();
    UI.createUIManager(uibody);
    
    // register global events handler.
    ActionManager.createManager();
    Models.getModels().registerListener(Models.Event.Farm.ACTION, bind(ActionManager.getManager().onFarmAction, ActionManager.getManager()))

	log.info("model created");
	app = new FarmApp(canvas);
	log.info("app created");
	app.init();
	log.info("app inited");
    var interval = 1000 / 30;
    setTimeout(function() {
        app.onTimer();
        setTimeout(arguments.callee, interval);
        }, interval);
	log.info("timer created");
	uibody.onmousedown = function(e)
	{
		app.onMouseDown(e);
	}
	uibody.onmousemove = function(e)
	{
		app.onMouseMove(e);
	}
	uibody.onmouseup = function(e)
	{
		app.onMouseUp(e);
	}
	uibody.onmouseout = function(e)
	{
		app.onMouseOut(e);
	}
    
	app.onTimer();
}

</script>

</head>
<body>
<section id="wrapper">
    <h1>Farm</h1>
    <p>Testing</p>
    <div id="global_container"style="position:relative; width:800px; height: 600px; overflow:hidden;">
      <canvas id="gameBody" width="800" height="600" style="position:relative;" ></canvas>
      <div id="uiBody"style="position:absolute;top:0px; left:0px; width:800px; height:600px; overflow:hidden;"" />
    </div>
    <!-- other misc things. -->

</section>
</body>
</html>
